<template>
	<view class="container-box">
		<view class="header-box">
			<view>统计门店</view>
			<view>
				<picker @change="storePickerChange" :range="storeArray" range-key="name">
					<view class="picker-tip">{{currentStore.name || '请选择门店'}}<uni-icons type="down" color="#000" size="20"></uni-icons></view>
				</picker>
			</view>
		</view>
		<view class="middle-header">
			<view>数据统计</view>
			<view>
				<picker @change="datePickerChange" :range="dateArray" range-key="name">
					<view class="picker-tip">{{currentDate.name}}<uni-icons type="down" color="#000" size="20"></uni-icons></view>
				</picker>
			</view>
		</view>
		<view class="middle-box">
			<view class="middle-top-box">
				<view class="top-left-box">
					<view>
						<view class="top-left-text">{{storeDataStat.totalOrderCount}}</view>
						<view>订单总数</view>
					</view>
				</view>
				<view class="top-right-box">
					<view class="right-inner-box">
						<view>预定订单数</view>
						<view class="right-inner-text">{{storeDataStat.totalPayOrderCount}}</view>
					</view>
					<view class="right-inner-box">
						<view>售后订单数</view>
						<view class="right-inner-text">{{storeDataStat.totalRefundOrderCount}}</view>
					</view>
				</view>
			</view>
			<view class="middle-bottom-box">
				<view class="bottom-item-box">
					<view class="bottom-item-text">{{storeDataStat.totalMtCount}}</view>
					<view>美团核销数</view>
				</view>
				<view class="bottom-item-box" style="margin: 0 20rpx;">
					<view class="bottom-item-text">{{storeDataStat.totalDyCount}}</view>
					<view>抖音核销数</view>
				</view>
				<view class="bottom-item-box">
					<view class="bottom-item-text">{{storeDataStat.totalRechargeOrderCount}}</view>
					<view>充值订单数</view>
				</view>
			</view>
		</view>
		<view class="middle-box">
			<view class="middle-big-box" @click="toOrderRecord">
				<view>
					<view class="middle-big-text">￥{{storeDataStat.totalIncomeAmount || 0}}</view>
					<view>小程序收入</view>
				</view>
				<view>
					<uni-icons type="right" color="#000" size="20"></uni-icons>
				</view>
			</view>
			<view class="middle-bottom-box">
				<view class="bottom-item-box">
					<view class="bottom-item-text">￥{{storeDataStat.totalAmount || 0}}</view>
					<view>小程序总金额</view>
				</view>
				<view class="bottom-item-box" style="margin: 0 20rpx;">
					<view class="bottom-item-text">￥{{storeDataStat.totalRefundAmount || 0}}</view>
					<view>退款总金额</view>
				</view>
				<view class="bottom-item-box">
					<view class="bottom-item-text">￥{{storeDataStat.totalRechargeAmount || 0}}</view>
					<view>充值总金额</view>
				</view>
			</view>
		</view>
		<view class="middle-header">
			<view>保洁统计</view>
		</view>
		<view class="middle-box">
			<view class="middle-bottom-box">
				<view class="bottom-item-box" style="margin-right: 20rpx;">
					<view class="bottom-inner">
						<view>保洁房间数</view>
						<view class="bottom-inner-text">{{storeClearStat.clearRecordCount}}</view>
					</view>
				</view>
				<view class="bottom-item-box">
					<view class="bottom-inner">
						<view>保洁时长</view>
						<view class="bottom-inner-text">{{storeClearStat.totalTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeArray: [],
				currentStore: {},
				dateArray: [{
						name: '今日',
						value:'today'
					},
					{
						name: '上周',
						value:'last-week'
					},
					{
						name: '本周',
						value:'week'
					},
					{
						name: '本月',
						value:'month'
					}
				],
				currentDate: {
					name: '今日',
					value:'today'
				},
				storeDataStat:{
					totalAmount:"",
					totalDyCount: 0,
					totalIncomeAmount: 0,
					totalMtCount: 0,
					totalOrderCount: 0,
					totalPayOrderCount: 0,
					totalRechargeAmount: "",
					totalRechargeOrderCount: 0,
					totalRefundAmount:"",
					totalRefundOrderCount: 0
				},
				storeClearStat:{
					clearRecordCount:0,
					totalTime: 0
				}
			}
		},

		methods: {
			// 选择门店
			storePickerChange(e) {
				this.currentStore = this.storeArray[e.detail.value];
				uni.setStorageSync('shopId',this.currentStore.shopId)
				this.getShopStat();
			},
			// 选择时间
			datePickerChange(e) {
				this.currentDate = this.dateArray[e.detail.value];
				this.getShopStat();
			},	
			// 请求店铺列表
			requestEvent() {
				this.$request({
					method: 'get',
					url: '/applet/store/shop/list',
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeArray = res.data || []
					if (this.storeArray.length > 0) {
						let storageShopId = uni.getStorageSync('shopId')
						if(storageShopId){
							this.storeArray.forEach((item)=>{
								if(item.shopId === storageShopId){
									this.currentStore = item
								}
							})
						}else{
							this.currentStore = this.storeArray[0]
							uni.setStorageSync('shopId',this.currentStore.shopId)
						}
						this.getShopStat()
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			getShopStat(){
				this.getDataStat()
				this.getClearStat();
			},
			// 请求数据统计
			getDataStat() {
				const data = {
					shopId: this.currentStore.shopId,
					timeType: this.currentDate.value
				}
				this.$request({
					method: 'post',
					url: '/applet/store/statistics/dataStat',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeDataStat = res.data || {}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			
			// 请求保洁统计
			getClearStat() {
				const data = {
					shopId: this.currentStore.shopId,
					timeType: this.currentDate.value
				}
				this.$request({
					method: 'post',
					url: '/applet/store/statistics/clearStat',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeClearStat = res.data || {}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 跳转收入页面
			toOrderRecord(){
				uni.navigateTo({
					url:`/pages/order-record/order-record?shopId=${this.currentStore.shopId}`
				})
			}
		},
		onShow() {
			this.requestEvent()
		}
	}
</script>

<style lang="scss" scoped>
	.container-box {
		background: #FFF;
		// #59BBE0;
		// ##FFD589
		padding:0 30rpx 30rpx 30rpx;

        .header-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			height: 100rpx;
			background: #FFD589;
			border: 1px solid #FFD589;
			border-radius: 10rpx;
			font-weight: 600;
			box-shadow: 
				7px 7px 12px rgba(0, 0, 0, .4),              
				inset 0 0 0 rgba(255, 255, 255, .9),            
				inset 0 0 0 rgba(0, 0, 0, .4)
		}
		
		.picker-tip{
			display: flex;
			align-items: center;
		}
		
		.middle-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 28rpx;
			font-weight: 600;
			margin: 30rpx 0;
			box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 rgba(255, 255, 255, 0.9), inset 0 0 0 rgba(0, 0, 0, 0.4);
			border-radius: 10rpx;
		}
		
		.middle-box{
			// background: #ffe7c4;
			// border: 1px solid #ffe7c4;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border: 1px solid #FFFFFF;
			border-radius: 5px;
			font-weight: 600;
			box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 rgba(255, 255, 255, 0.9), inset 0 0 0 rgba(0, 0, 0, 0.4);
			.middle-top-box{
				display: flex;
				
				.top-left-box{
					flex: 0 0 260rpx;
					height: 260rpx;
					background: #FFD589;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					text-align: center;
					margin-right: 20rpx;
					font-size: 38rpx;
					font-weight: 600;
					box-shadow: 
						7px 7px 12px rgba(0, 0, 0, 0.4), 
						inset 0 0 0 rgba(255, 255, 255, 0.9), 
						inset 0 0 0 rgba(0, 0, 0, 0.4);
				}
				
				.top-left-text{
					margin-bottom: 20rpx;
					font-size: 38rpx;
					font-weight: 600;
					color: red;
					transform: scale(1.8);
				}
				
				.top-right-box{
					flex: 1;
				}
				
				.right-inner-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					height: 120rpx;
					padding: 0 20rpx;
					background: #FFD589;
					border-radius: 10rpx;
					box-shadow:
						7px 7px 12px rgba(0, 0, 0, 0.4), 
						inset 0 0 0 rgba(255, 255, 255, 0.9), 
						inset 0 0 0 rgba(0, 0, 0, 0.4);
				}
				
				.right-inner-text{
					font-weight: 600;
					color: red;
					transform: scale(1.5);
				}
			}
			
			.middle-bottom-box{
				display: flex;
				
				.bottom-item-box{
					flex: 1;
					text-align: center;
					background: #FFD589;
					padding: 20rpx 0;
					border-radius: 10rpx;
					box-shadow:
						7px 7px 12px rgba(0, 0, 0, 0.4), 
						inset 0 0 0 rgba(255, 255, 255, 0.9), 
						inset 0 0 0 rgba(0, 0, 0, 0.4);
				}
				
				.bottom-item-text{
					font-weight: 600;
					margin-bottom: 20rpx;
					color: red;
					transform: scale(1.5);
				}
			}
			
			.middle-big-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 38rpx;
				background: #FFD589;
				padding: 20rpx;
				text-align: center;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				box-shadow:
					7px 7px 12px rgba(0, 0, 0, 0.4), 
					inset 0 0 0 rgba(255, 255, 255, 0.9), 
					inset 0 0 0 rgba(0, 0, 0, 0.4);
				.middle-big-text{
					margin-bottom: 20rpx;
					min-width: 100rpx;
				}
			}
			
			.bottom-inner{
				display: flex;
				align-items: center;
				justify-content: space-between;	
				padding: 0 20rpx;
				
				.bottom-inner-text{
					font-weight: 600;
				}
			}
		}


	}
</style>